<template>
    <el-dialog @open="open" v-model="isOpen" title="修改规格" @close="close" style="width: 800px;min-height: 300px">
        <el-skeleton :rows="5" :loading="loading" animated>
            <template #default>
                <el-form label-width="100px" style="max-width: 700px" v-loading="loading" v-show="!loading">
                    <el-tabs tab-position="left" class="demo-tabs scrollThin">
                        <el-tab-pane v-for="group in baseAttrGroups" :key="group.attrGroupId" :label="group.attrGroupName">
                            <el-form-item :label="attr.attrName" v-for="attr in group.attrs">

                                <el-checkbox-group v-if="attr.valueType===1" v-model="attr.attrValues">
                                    <el-checkbox :label="item.label" v-for="item in attr.items" :checked="item.checked">
                                        {{item.label}}
                                    </el-checkbox>
                                </el-checkbox-group>

                                <el-radio-group v-model="attr.attrValues" v-if="attr.valueType===0">
                                    <el-radio v-for="item in attr.items" :label="item.label">{{item.label}}</el-radio>
                                </el-radio-group>
                                <el-checkbox label="快速展示" style="margin-left: 20px;color: #4ab3ff;" v-model="attr.quickShow" :checked="attr.quickShow===1"/>
                            </el-form-item>

                        </el-tab-pane>
                    </el-tabs>
                    <el-form-item>
                        <el-button type="primary" activity  @click="updatePmsSpuAttrValues">更新</el-button>
                        <el-button @click="close" type="success" activity >取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-skeleton>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,nextTick} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    let loading = ref(true)
    let props = defineProps(['id','catalogId'])
    let form = reactive({})
    let isOpen = ref(false)
    let baseAttrGroups = reactive([])
    defineExpose({isOpen})

    function open(){
        baseAttrGroups.length=0
        request.get(`/api/pmsSpuInfo/getAttrGroupWithAttrByCatalogId/${props.catalogId}`).then(resp1 => {

            let checkedAttrValueMap = new Map()
            let checkedAttrQuickShow = []
            request.get(`/api/pmsSpuInfo/getPmsSpuBaseAttrs/${props.id}`).then(resp => {

                resp.forEach(e=>{
                    checkedAttrValueMap.set(e.attrId, e.attrValue.split(";"))
                    if(e.quickShow===1){
                        checkedAttrQuickShow.push(e.attrId)
                    }
                })
                baseAttrGroups.push(...resp1.map(e=>{
                    return {attrGroupId: e.attrGroupId, attrGroupName: e.attrGroupName, attrs: e.attrs.map(a=>{
                           return{
                               valueSelect: a.valueSelect,
                               attrId: a.attrId,
                               attrName: a.attrName,
                               valueType:a.valueType
                           }
                        })
                    }
                }))

                baseAttrGroups.forEach(group =>{
                    group.attrs.forEach(attr =>{

                        if(checkedAttrQuickShow.indexOf(attr.attrId) > -1){
                            attr.quickShow = 1
                        }

                        let labels = attr.valueSelect.split(";")
                        if(attr.valueType===0){//单选
                            if(checkedAttrValueMap.get(attr.attrId)){
                                attr.attrValues = checkedAttrValueMap.get(attr.attrId)[0]
                            }else{
                                attr.attrValues = null
                            }
                        }else{// 多选
                            attr.attrValues = checkedAttrValueMap.get(attr.attrId)
                        }
                        attr.items = []
                        labels.forEach(e =>{
                            let checked = false
                            if(checkedAttrValueMap.get(attr.attrId) && checkedAttrValueMap.get(attr.attrId).indexOf(e) > -1){
                                checked = true
                            }
                            attr.items.push({label:e, checked:checked})
                        })
                    })
                })
                nextTick(()=>{
                    loading.value = false
                })
            })
        })
    }

    function close(){
        isOpen.value = false
    }

    function updatePmsSpuAttrValues(){
        let attrValues = []
        baseAttrGroups.forEach(grpup =>{
            grpup.attrs.forEach(a=>{
                if(a.attrValues && a.attrValues != ""){
                    let temp  = {spuId: props.id, attrId: a.attrId, attrName: a.attrName, quickShow: a.quickShow==true ? 1:0}
                    if(a.valueType===0){//单选
                        temp.attrValue = a.attrValues
                    }else{
                        temp.attrValue = a.attrValues.join(";")
                    }
                    attrValues.push(temp)
                }
            })
        })
        request.post(`/api/pmsSpuInfo/updateSpuBaseAttrValues`, attrValues).then(resp => {
            ElMessage({message: '更新规格参数成功！',type: 'success'})
            close()
        })
    }
</script>

<style scoped>

</style>